<template>
  <view class="container">
    <!-- 头部菜单 -->
    <view class="order-tit">
      <text data-orderStatus="0" :class="orderStatus==0?'on':''" @tap="onorderStatusTap">
        全部
      </text>
      <text data-orderStatus="1" :class="orderStatus==1?'on':''" @tap="onorderStatusTap">
        待支付
      </text>
      <text data-orderStatus="2" :class="orderStatus==2?'on':''" @tap="onorderStatusTap">
        待发货
      </text>
      <text data-orderStatus="3" :class="orderStatus==3?'on':''" @tap="onorderStatusTap">
        待收货
      </text>
      <text data-orderStatus="4" :class="orderStatus==4?'on':''" @tap="onorderStatusTap">
        已完成
      </text>
      <text data-orderStatus="5" :class="orderStatus==5?'on':''" @tap="onorderStatusTap">
        已取消
      </text>
    </view>
    <!-- end 头部菜单 -->
    <view class="main">
      <view v-if="list.length==0" class="empty">
        还没有任何相关订单
      </view>
      <!-- 订单列表 -->
      <block v-for="(item, index) in list" :key="index">
        <view class="prod-item">
          <view class="order-num">
            <text>订单编号：{{ item.id }}</text>
            <view class="order-state">
              <text
                :class="'order-orderStatus  ' + (item.status==1?'red':'') + '  ' + ((item.status==5||item.status==6)?'gray':'')">
                {{
                  item.status == 1 ? '等待用户支付' : (item.status == 2 ? '待发货' : (item.status == 3 ? '待用户收货' : (item.status == 4 ? '订单已完成' : '订单已取消')))
                }}
              </text>
            </view>
          </view>

          <!-- 商品列表 -->
          <view>
            <view class="item-cont" :data-ordernum="item.id" @tap="toOrderDetailPage">
              <view class="prod-pic">
                <image :src="item.pic" />
              </view>
              <view class="prod-info">
                <view class="prodname">
                  {{ item.productName }}
                </view>
                <view class="prod-info-cont">
                  {{ item.skuName }}
                </view>
                <view class="price-nums">
                  <text class="prodprice">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(item.totalPrice)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(item.totalPrice)[1] }}
                    </text>
                  </text>

                </view>
              </view>
            </view>
          </view>


          <view class="total-num">
            <text class="prodcount">
              共1件商品
            </text>
            <view class="prodprice">
              合计：
              <text class="symbol">
                ￥
              </text>
              <text class="big-num">
                {{ wxs.parsePrice(item.totalPrice)[0] }}
              </text>
              <text class="small-num">
                .{{ wxs.parsePrice(item.totalPrice)[1] }}
              </text>
            </view>
          </view>
          <!-- end 商品列表 -->
          <view class="prod-foot">
            <view class="btn">
              <text v-if="item.status==2" class="button" :data-orderId="item.id"
                hover-class="none" @tap="openExpressNumber">
                发货
              </text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <!-- end 订单列表 -->

  	<view>
  			<!-- 输入框示例 -->
  			<uni-popup ref="inputDialog" type="dialog">
  				<uni-popup-dialog ref="inputClose"  mode="input" title="请输入物流单号"  placeholder="请输入物流单号" @confirm="submitExpressNumber"></uni-popup-dialog>
  			</uni-popup>
  		</view>
</template>

<script setup>
import { ref,getCurrentInstance} from 'vue';
  const wxs = number()

  const orderStatus = ref(0)
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    loadOrderData(0, 1)
  })

  const current = ref(1)
  const pages = ref(0)
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    if (current.value < pages.value / 10) {
      loadOrderData(orderStatus.value, current.value + 1)
    } else {
      uni.showToast({
        title: '没有更多了',
        icon: 'none'
      })
    }
  })

  const list = ref([])
  /**
   * 加载订单数据
   */
  const loadOrderData = ( orderStatus, currentParam) => {
    uni.showLoading() // 加载订单列表
    http.request({
        url: '/orders/mySaleOrder',
        method: 'GET',
        data: {
          orderStatus: orderStatus,
          current: currentParam,
        }
      })
      .then(({
        data
      }) => {
        console.log("订单数据");
        console.log(data);
        let listParam = []
        if (data.current === 1) {
          listParam = data.records
        } else {
          listParam = list.value
          Array.prototype.push.apply(listParam, data.records)
        }
        list.value = listParam
        pages.value = data.pages
        current.value = data.current
        uni.hideLoading()
      })
  }

  /**
   * 状态点击事件
   */
  const onorderStatusTap = (e) => {
    orderStatus.value = e.currentTarget.dataset.orderStatus
    loadOrderData(orderStatus.value, 1)
  }

const {proxy} = getCurrentInstance()
const inputDialog=ref(null)
let ecpressOrderId=''

  /**
   * 开启填写物流单号弹窗
   */
const openExpressNumber = (e) => {
  ecpressOrderId=e.currentTarget.dataset.orderId
  console.log(ecpressOrderId);
  console.log(e);
  console.log(proxy.$refs);
  console.log(proxy.$refs.inputDialog);
  proxy.$refs.inputDialog.open()
}

/**
 * 提交物流单号
 * @param {Object} value
 */
const submitExpressNumber = (value) => {

  http.request({
    url: '/orders/delivery',
    method: 'PUT',
    data: {
      orderId: ecpressOrderId,
      expressNumber: value,
    }
  }).then((res)=>{
    console.log(res);
    if(res.code==1){
      uni.showToast({
        icon:"success",
        title:res.msg
      })
      proxy.$refs.inputDialog.close()
      loadOrderData(orderStatus.value, current.value)
    }else{
      uni.showToast({
        icon:"error",
        title:res.msg
      })
    }
  })

}


  /**
   * 查看订单详情
   */
  const toOrderDetailPage = (e) => {
    uni.navigateTo({
      url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
    })
  }


</script>

<style scoped lang="scss">
  @use './mySaleOrderList.scss';
</style>
